<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
     <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<style>
table {
  counter-reset: rowNumber;
}
table tbody tr {
  counter-increment: rowNumber;
}
table tr td:first-child::before {
  content: counter(rowNumber);
  margin-right: 0.5em;
}
</style>


</head>
<body>
 <!-- 固定访问的URL不变  -->
    <script>
    // 在页面加载时执行
    window.onload = function() {
        // 将浏览器的URL替换为固定的URL
        window.history.replaceState(null, null, '/admin/');
    };
    </script>

<div class="container">
    &nbsp
    <div style="margin-bottom: 10px" class="clearfix">
        <a class="btn btn-primary" href="/app02/devices/add">
            <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
            添加设备
        </a>
        <a class="btn btn-primary" href="/app02/devices/all">
            <span class="glyphicon glyphicon-cloud-upload" aria-hidden="true"></span>
            &nbsp批量导入
        </a>
        <a class="btn btn-primary" href="/app02/devices/export">
            <span class="glyphicon glyphicon-cloud-download" aria-hidden="true"></span>&nbsp;
            导出csv文件
        </a>
        <div style="float: right;width: 800px">
            <form method="get" class="form-inline">
                <button class="btn btn-primary" type="submit">
                    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>&nbsp;搜索
                </button>
                &nbsp&nbsp
                <div class="form-group">
                    <input type="text" name="q1" class="form-control" placeholder="请输入IP地址..." value={{ search_data1 }}>
                </div>
                &nbsp&nbsp
                <div class="form-group">
                    <input type="text" name="q2" class="form-control" placeholder="请输入地区..." value={{ search_data2 }}>
                </div>
                &nbsp&nbsp
                <div class="form-group">
                    <input type="text" name="q3" class="form-control" placeholder="请输入厂商..." value={{ search_data3 }}>
                </div>
<!--                <div class="col-lg-6">-->
<!--                    <div class="input-group">-->
<!--                        <input type="text" name="q" class="form-control" placeholder="请输入IP或地区" value={{ search_data }}>-->
<!--                        <span class="input-group-btn">-->
<!--                        <button class="btn btn-default" type="submit">-->
<!--                            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>-->
<!--                        </button>-->
<!--                      </span>-->
<!--                    </div>&lt;!&ndash; /input-group &ndash;&gt;-->
<!--                </div>&lt;!&ndash; /.col-lg-6 &ndash;&gt;-->
            </form>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading">
            <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
            设备列表
        </div>

        <table class="table table-bordered" style="text-align:center" >
            <thead >
                <tr>
                    <th style="text-align:center">序号</th>
                    <th style="text-align:center">管理IP</th>
                    <th style="text-align:center">设备名称</th>
                    <th style="text-align:center">厂商</th>
                    <th style="text-align:center">型号</th>
                    <th style="text-align:center">序列号</th>
                    <th style="text-align:center">地区</th>
                    <th style="text-align:center">位置</th>
                    <th style="text-align:center">机柜</th>
                    <th style="text-align:center">录入方式</th>
                    <th style="text-align:center">设备操作</th>
                </tr>
            </thead>
            <tbody id="num">
            {% for device in devices %}
            <tr>
                <td> </td>
                <td>{{ device.ip}}</td>
                <td>{{ device.dev_name }}</td>
                <td>{{ device.vendor }}</td>
                <td>{{ device.xinghao }}</td>
                <td>{{ device.sn }}</td>
                <td>{{ device.diqu }}</td>
                <td>{{ device.weizhi }}</td>
                <td>{{ device.jigui }}</td>
                <td>{{ device.enter }}</td>
                <td>
                    <a class="btn btn-primary btn-xs" href="/app02/devices/?nid={{ device.id }}">删除</a>
                    <a class="btn btn-primary btn-xs" href="/app02/devices/{{ device.id }}/edit/">编辑</a>
                    <a class="btn btn-primary btn-xs" target="_self" href="/app02/devices/{{ device.id }}/ssh/">登录</a>
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    <div class="clearfix">
        <ul class="pagination" style="float:left;">
            {{ page_string }}
            <li>
                <form method="get" style="float: left;margin-left: -1px">
                    <div class="input-group" style="width: 110px">
                        <input type="text" name="page" class="form-control" placeholder="页码">
                        <span class="input-group-btn">
                            <button type="submit" class="btn btn-default">跳转</button>
                        </span>
                    </div>
                </form>
            </li>

        </ul>
    </div>
</div>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>